<script setup lang="ts">
  import { useImgPreviewStore } from '@/stores/preview';
  import { useThemeStore } from '@/stores/theme';

  import Header from '@/views/Header/index.vue';
  import Footer from '@/views/Footer/index.vue';
  import BockTop from '@/views/BockTop/index.vue';

  const imgPreviewStore = useImgPreviewStore();
  const themeStore = useThemeStore();

</script>

<template>
  <div class="app-wrapper" :class="(themeStore.themeFlag ? 'black theme' : '')">
    <!-- 网站头部 -->
    <Header />
    <!-- 网站主体 -->
    <router-view/>
    <!-- 网站尾部 -->
    <Footer />  
    <!-- 返回底部 -->
    <BockTop />
    <!-- 图片预览 -->
    <el-image-viewer
        v-if="imgPreviewStore.isShowing"
        :z-index="5000"
        :initial-index="0"
        :zoom-rate="1.1"
        :hide-on-click-modal="true"
        :url-list="[imgPreviewStore.previewUrl]"
        @close="imgPreviewStore.close()"
    />
  </div>
</template>

